<template>
  <div class="main app-container">
    <div class="main-container">
      <div class="cbox">
        <el-form class="form" :model="flt" :inline="true" ref="fltForm">
          <!-- <el-row  :gutter="20" class="row">
            <el-col :span="5"> -->
          <el-form-item size="mini" label="集团/糖厂/货主代码：" prop="dptCode">
            <el-input clearable maxlength="20" v-model="flt.dptCode" size="mini" style="width: 180px"></el-input>
          </el-form-item>
          <!-- </el-col> -->
          <!-- <el-col :span="5"> -->
          <el-form-item size="mini" label="集团/糖厂/货主名称：" prop="dptName">
            <el-input clearable maxlength="20" v-model="flt.dptName" size="mini" style="width: 180px"></el-input>
          </el-form-item>
          <!-- </el-col> -->
          <!-- <el-col :span="5"> -->
          <el-form-item label="机构类型:" prop="dptType" size="mini">
            <el-select v-model="flt.dptType" clearable style="width: 180px">
              <el-option value="JT/TC" label="集团/糖厂"></el-option>
              <el-option value="HZ" label="货主"></el-option>
            </el-select>
          </el-form-item>
          <!-- </el-col> -->
          <!-- <el-col :span="2"> -->
          <el-form-item size="mini">
            <el-button size="mini" type="primary" @click="searchList">查询</el-button>
          </el-form-item>
          <!-- </el-col> -->
          <!-- </el-row> -->
          <el-row :gutter="10" class="row">
            <el-col :span="24">
              <el-form-item size="mini">
                <buttonName @clickEvent="clickEventDom"></buttonName>
                <!--                <el-button size="mini" type="primary" plain v-if="isAuth('add')" @click="addNew">新增</el-button>-->
                <!--                <el-button size="mini" type="primary" plain v-if="isAuth('edit')" @click="edit">编辑</el-button>-->
                <!--                <el-button size="mini" type="primary" plain v-if="isAuth('del')" @click="del">删除</el-button>-->
                <!-- <el-button size="mini" type="primary" plain @click="addNew">新增</el-button>
                <el-button size="mini" type="primary" plain  @click="edit">编辑</el-button>
                <el-button size="mini" type="primary" plain  @click="del">删除</el-button> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="table">
        <div class="inner" ref="inner">
          <el-table
            :data="departmentList"
            border
            row-key="dptId"
            :tree-props="{ children: 'children' }"
            :height="maxHeight"
            :header-cell-style="{ textAlign: 'center' }"
            highlight-current-row
            @row-dblclick="rowdbClick"
            @row-click="rowClick"
          >
            <el-table-column align="center" label="序号" :index="indexMethod" show-overflow-tooltip size="mini" type="index" width="50"></el-table-column>
            <el-table-column label="企业代码" prop="dptCode" show-overflow-tooltip size="mini" sortable width="142"></el-table-column>
            <el-table-column label="企业名称" prop="dptName" show-overflow-tooltip size="mini" sortable width="140"></el-table-column>
            <el-table-column label="地址" prop="dptAddress" show-overflow-tooltip size="mini" sortable width="140"></el-table-column>
            <el-table-column label="联系人" prop="dptContact" show-overflow-tooltip size="mini" sortable width="140"></el-table-column>
            <el-table-column label="联系人电话" prop="dptPhone" show-overflow-tooltip size="mini" sortable width="140"></el-table-column>
            <el-table-column label="法人代表" prop="dptCorporation" show-overflow-tooltip size="mini" sortable width="140"></el-table-column>
            <el-table-column label="法人身份证号" prop="dptCorporationId" show-overflow-tooltip size="mini" sortable width="140"></el-table-column>
            <el-table-column label="营业执照注册号" prop="dptBusinessLicenseNo" show-overflow-tooltip size="mini" sortable width="150"></el-table-column>
            <el-table-column label="上级机构" prop="dptPredptName" show-overflow-tooltip size="mini" sortable width="140"></el-table-column>
            <el-table-column align="center" label="用户人数" prop="userCount" show-overflow-tooltip size="mini" sortable width="140"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip label="查看用户" prop="userCount" width="140">
              <template slot-scope="scope">
                <el-button @click="see(scope.row)" plain size="mini" type="primary" v-if="scope.row.userCount != 0">查看 </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--          <el-table :height="maxHeight" style="width: 100%" :data="departmentList" :highlight-current-row="true" @row-click="rowClick" border :header-cell-style="{-->
          <!--              textAlign: 'center'-->
          <!--            }"-->
          <!--            @row-dblclick="view">-->
          <!--            <el-table-column align="center" width="60" label="序号" :index="indexMethod" type="index"></el-table-column>-->
          <!--            <el-table-column align="left" show-overflow-tooltip label="集团/糖厂代码" prop="dptCode"></el-table-column>-->
          <!--            <el-table-column align="left" show-overflow-tooltip label="集团/糖厂名称" prop="dptName"></el-table-column>-->
          <!--            <el-table-column align="left" show-overflow-tooltip label="上级机构" prop="dptName"></el-table-column>-->
          <!--            <el-table-column align="left" show-overflow-tooltip label="用户人数" prop="userCount"></el-table-column>-->
          <!--            <el-table-column align="center" show-overflow-tooltip label="查看用户" prop="userCount">-->
          <!--              <template slot-scope="scope">-->
          <!--              <el-button v-if="scope.row.userCount != 0" size="mini" type="primary" plain @click="see(scope.row)">查看</el-button>-->
          <!--               </template>-->
          <!--            </el-table-column>-->
          <!--          </el-table>-->
        </div>
      </div>
      <el-pagination
        class="pagination"
        small
        background
        ref="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Pagination.currentPage"
        :page-sizes="Pagination.pageSizeList"
        :page-size="Pagination.pageSize"
        :layout="Pagination.layout"
        :total="Pagination.total"
      ></el-pagination>
      <el-dialog v-el-drag-dialog :close-on-click-modal="false" :close-on-press-escape="false" v-if="showDialog" :visible.sync="showDialog" :title="operate">
        <v-dialog :dialogmode="operate" :disabled="!isEditMode" @close="closeEdit" @save="saveFltInfo" :flt_info="currentFltInfo"> </v-dialog>
      </el-dialog>

      <el-dialog
        v-el-drag-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="showSeeDialog"
        :visible.sync="showSeeDialog"
        :title="operate"
      >
        <s-dialog :disabled="!isEditMode1" @close="closeEdit" @save="saveFltInfo" :flt_info="currentFltInfo" :userdata="usersData"> </s-dialog>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import VDialog from './dialog'
import SDialog from './seedialog'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
import isAuth from '@/mixins/buttonAuth'

import { addsysdepartmentList, checkAllSysDepartment, checksysdepartmentList, checkusersList, delsysdepartment, editsysdepartment } from '@/request/api'
import buttonName from '@/components/buttonName/button-name'

export default {
  name: 'router.groupCreate',
  mixins: [resizeMixin, paginationMixin, isAuth],
  data() {
    return {
      Pagination: {
        ref: 'pagination',
        pageSize: 34, // 每页条数
        pageSizeList: [30, 60, 90, 120], // 分页数组
        currentPage: 1, // 当前页码
        total: 0, // 总条数
        layout: 'sizes, prev, pager, next, jumper, total', // 按钮布局
      },
      flt: {
        dptCode: '',
        dptName: '',
      },
      departmentList: [],

      // 查看用户
      usersData: [],
      // 派车中心下拉
      alldptList: [],

      isEditMode: true,
      operate: '',
      showDialog: false,
      showSeeDialog: false,

      currentRow: {},
      currentFltInfo: {},

      roleStatus: [],
      rules: {
        dptCode: [{ min: 0, max: 20, message: '输入至多20个字符', trigger: 'blur' }],
        dptName: [{ min: 0, max: 37, message: '至多输入37个字符', trigger: 'blur' }],
      },
      maxHeight: -1,
    }
  },

  methods: {
    clickEventDom(item) {
      if (item.mdlCode === 'add') {
        this.addNew()
      } else if (item.mdlCode === 'edit') {
        this.edit()
      } else if (item.mdlCode === 'del') {
        this.del()
      }
    },
    // 生成表格序号的方法
    indexMethod(index) {
      return 1 + index + (Number(this.Pagination.currentPage) - 1) * Number(this.Pagination.pageSize - 2)
    },
    // 重写的获取列表数据的方法
    getList(currentPage, pageSize, updateTotal) {
      this.clearState()
      checksysdepartmentList({
        dptCode: this.flt.dptCode,
        dptName: this.flt.dptName,
        dptType: this.flt.dptType == null ? 'JT/TC/HZ' : this.flt.dptType,
        PageIndex: this.Pagination.currentPage,
        PageSize: this.Pagination.pageSize,
      }).then(res => {
        if (res.data.content && res.data.content.length) {
          this.departmentList = res.data.content[0].children == null ? res.data.content : res.data.content[0].children
          console.log(this.departmentList)
          updateTotal(Number(res.total - 2))
        } else {
          this.departmentList = []
        }
      })
      this.currentRow = {}
    },
    addNew() {
      this.operate = this.DIALOG_MODE.ADD
      this.isEditMode = true
      this.currentFltInfo = {
        dptSeq: '',
        dptCode: '',
        dptName: '',
        dptFltId: '',
        remark: '',
        fltName: '',
        dptPredptId: '-1', //上级机构id
        dptType: 'JT',
        dptPredptName: '泛糖科技',
        dptEmail: '',
      }
      this.showDialog = true
    },
    edit() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要编辑的数据！', '提示', {
          confirmButtonText: '确定',
        })
        return
      }

      this.operate = this.DIALOG_MODE.EDIT
      this.isEditMode = true
      this.currentFltInfo = Object.assign({}, this.currentRow)
      // this.currentFltInfo =  this.currentRow
      this.showDialog = true
    },
    view(row) {
      this.operate = this.DIALOG_MODE.VIEW
      this.isEditMode = false
      this.currentFltInfo = Object.assign({}, row)
      this.showDialog = true
    },
    // 查看用户dialog
    see(row) {
      this.operate = this.DIALOG_MODE.SEE
      this.isEditMode1 = true
      this.showSeeDialog = true
      this.showDialog = false
      checkusersList({ dptId: row.dptId }).then(res => {
        this.usersData = res.data
      })
    },
    closeEdit() {
      ;(this.showDialog = false), (this.showSeeDialog = false)
    },

    saveFltInfo(info) {
      switch (this.operate) {
        case this.DIALOG_MODE.ADD:
          var itemType = Object.assign({ dptFltId: this.currentRow.dptFltId }, info)
          console.log(itemType, 'itemType')
          addsysdepartmentList(itemType).then(() => {
            this.$message({
              message: '新增成功！',
              type: 'success',
              showClose: true,
            })
            this.showDialog = false
            this.refreshList()
          })
          break
        case this.DIALOG_MODE.EDIT:
          editsysdepartment(info).then(() => {
            this.$message({
              message: '编辑成功！',
              type: 'success',
              showClose: true,
            })
            this.showDialog = false
            this.refreshList()
          })
          break
        default:
          break
      }
    },
    rowClick(row) {
      console.log(row)
      this.currentRow = row
    },
    del() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要删除的数据', '提示', {
          confirmButtonText: '确定',
        })
        return
      }
      this.$confirm('您确认要删除选定的数据吗?', '提示', {
        closeOnClickModal: false,
      }).then(() => {
        let leta = {}
        leta['dptId'] = this.currentRow.dptId
        leta['version'] = this.currentRow.version
        delsysdepartment(leta).then(() => {
          this.$message({
            message: '删除成功！',
            type: 'success',
            showClose: true,
          })
          this.refreshList()
        })
      })
    },
    clearState() {
      this.currentRow = {}
      this.currentFltInfo = {}
    },
    //查看用户信息
    getUserInfo() {},
    // 派车中心下拉
    getAlldpt() {
      checkAllSysDepartment().then(res => {
        this.alldptList = res.data
      })
    },
  },
  components: {
    VDialog,
    SDialog,
    buttonName,
  },
  mounted() {
    this.searchList()
  },
  created() {
    this.getAlldpt()
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
}
</script>

<style lang="scss" scoped>
//   .el-table--scrollable-y {
//   ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
//     width: 10px;
//   }
// }
.main {
  height: 100%;
  position: relative;
  width: 100%;
}

.main-container {
  height: 100%;
  width: 100%;
  position: relative;
  // padding: 0 12px;
  display: flex;
  flex-direction: column;

  .form {
    width: 100%;
    flex: 0 0 auto;

    .row {
      width: 100%;
      // margin: 10px 0;
      margin-bottom: 0;
    }
  }

  .table {
    flex: 1;
    overflow: hidden;
    position: relative;

    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
}
</style>
